<%--
  Created by IntelliJ IDEA.
  User: w7851
  Date: 2018/5/21
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆页面</title>
    <meta charset="utf-8">

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        #content {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #logincon {
            width: 400px;
            height: 400px;
            background-color: #23262E;
            color: white;
            padding: 16px;
        }
    </style>
</head>
<body>
<div id="content">

    <div id="logincon">
        <h2 style="text-align: center">欢迎登陆</h2>

        <form method="post" action="/admdesk">
            <input name="method" value="dologin" style="display: none;">
            <div class="form-group">
                <input name="username" type="text" maxlength="11" class="form-control" id="username" placeholder="用户名">
            </div>

            <div class="form-group">
                <input name="passwd" type="password" class="form-control" id="passwd" placeholder="密码">
            </div>

            <div class="form-group">
                <input name="code" type="password" class="form-control" id="code" placeholder="验证码">
                <img src="/mobile?method=getyzm" style="width: 150px;height: 40px;margin-top: 8px"
                     onclick="changeImg()">
                <span id="tip" class="help-block" style="color: white">请登陆</span>
            </div>

            <button type="submit" class="btn btn-success"
                    style="display: block;width: 100%;height:44px;margin-top: 26px">
                登陆
            </button>
        </form>

    </div>

</div>
</body>
<script>
    function changeImg() {
        var imgSrc = $("img");
        var src = "/mobile?method=getyzm&t=" + (new Date().getTime());
        console.log(src);
        imgSrc.attr("src", src);
    }

    $("form").submit(function () {
        var notyString = "提示";
        var canlog = true;
        var user = $("#username");
        var passwd = $("#passwd");
        var code = $("#code");
        var tip = $("#tip");

        $.ajax(
            {
                type: "POST",
                async: false,
                url: "/admdesk",
                data: {"method": "verifylogin", "username": user.val(), "passwd": passwd.val(), "code": code.val()},
                success: function (data) {
                    console.log(data);
                    var correct = "ok";
                    if (data == correct) {

                    } else {
                        canlog = false;
                        notyString = notyString + " 【输入错误，验证不通过】"
                    }
                }
            }
        );

        if (!canlog) {
            tip.html(notyString);
            return false;
        } else {

        }

    });
</script>
</html>
